import {UIPanel} from "../../js/threejs/libs/ui.js";

export default class ContentCenterButton {
  #inner = `
      <table class="panel-table">
        <thead>
          <tr class="panel-table-title">
            <th colspan="4"><img src="images/icon04.png" alt="🈳" /> 方案列表</th>
          </tr>
          <tr class="panel-table-thead-column">
            <td>方案名称</td>
            <td>传感器数量</td>
            <td>在线数量</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr class="panel-table-tbody" id="scheme-list">
            
          </tr>
        </tbody>
      </table>
    `

  constructor(displayer) {
    let that = this
    let container = new UIPanel()
    container.setId('center_bot')
    container.setClass('center_bot')
    container.dom.innerHTML = this.#inner

    this.container = container

    displayer.signals.deployConfigLoaded.add(deployConfig => {
      displayer.request.getAction('/display/getSceneSchemeCount', {sceneId: deployConfig.id})
        .then(res => {
          if (res.success) {
            that.buildSchemeRow(res.result)
          }
        });
    });

  }

  buildSchemeRow(schemes) {
    for (const scheme of schemes) {
      document.getElementById('scheme-list').innerHTML = `
        <tr class="panel-table-tbody">
          <td>${scheme.name}</td>
          <td>${scheme['deviceCountAll']}</td>
          <td>${scheme['deviceCountOnline']}</td>
          <td>
            <button class="scheme-list-b1">报警记录</button>
            <button class="scheme-list-b2">历史数据</button>
            <button class="scheme-list-b3">组态应用</button>
          </td>
        </tr>`;
    }
  }

  computTotalDevice() {
  }

  computOnlineDevice() {
  }
}
